<template>
  <div class="container">
    <div class="loading" v-if="loading"></div>
    <div v-show="!loading">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-card shadow="always">
            <el-form :model="formList" ref="formList" size="normal">
              <div class="title">本年资产信息</div>
              <div class="titleCompare">数量:</div>
              <div class="divCompare">
                <div id="device_num1" style="display:inline">{{formList.device_num}}</div>
              </div>
              <div class="titleCompare">设备（系统）名称:</div>
              <div class="divCompare">
                <div id="device_name1" style="display:inline">{{formList.device_name}}</div>
              </div>
              <div class="titleCompare">资产运行状态:</div>
              <div class="divCompare">
                <div id="status1" style="display:inline">{{formList.status | f_runType}}</div>
              </div>
              <div class="titleCompare">资产类型:</div>
              <div class="divCompare">
                <div id="device_type1" style="display:inline">{{formList.device_type | f_ITtypeRename}}</div>
              </div>
              <div class="titleCompare">其它类型:</div>
              <div class="divCompare">
                <div id="other1" style="display:inline">{{formList.other }}
                </div>
              </div>
              <div class="titleCompare">设备（系统）型号:</div>
              <div class="divCompare">
                <div id="device_model1" style="display:inline">{{formList.device_model }}</div>
              </div>
              <div class="titleCompare">购置时间:</div>
              <div class="divCompare">
                <div id="purchase_time1" style="display:inline">{{formList.purchase_time}}</div>
              </div>
              <div class="titleCompare">总购置价格:</div>
              <div class="divCompare">
                <div id="purchase_price1" style="display:inline">{{formList.purchase_price}}</div>
              </div>
              <div class="titleCompare">过保时间（质保日期）:</div>
              <div class="divCompare">
                <div id="guarantee_time1" style="display:inline">{{formList.guarantee_time}}
                </div>
              </div>
              <div class="titleCompare">制造商:</div>
              <div class="divCompare">
                <div id="manufacturer1" style="display:inline">{{formList.manufacturer}}</div>
              </div>
              <div class="titleCompare">承建商:</div>
              <div class="divCompare">
                <div id="contactor1" style="display:inline">{{formList.contactor}}</div>
              </div>
              <div class="titleCompare">总运维资金预算:</div>
              <div class="divCompare">
                <div id="service_pre_amount1" style="display:inline">{{formList.service_pre_amount  }}
                </div>
              </div>
              <div class="titleCompare">采购方式:</div>
              <div class="divCompare">
                <div id="buy_type1" style="display:inline">{{formList.buy_type | f_purchaseType}}</div>
              </div>
              <el-form-item prop="only_source_file" v-if="formList.buy_type== 1">
                <up-load titleName="单一来源附件" :size="50" :require="true" :switch="false"
                  :color="formList.only_source_file!=formList.only_source_file?'red':''"
                  v-model="formList.only_source_file">
                </up-load>
              </el-form-item>
              <div>
                <div class="titleCompare">服务内容:</div>
                <div class="divCompare">
                  <div id="service_content1" style="display:inline">{{formList.service_content}} </div>
                </div>
              </div>
              <div class="titleCompare">运维开始时间:</div>
              <div class="divCompare">
                <div id="serve_start_date1" style="display:inline">{{formList.serve_start_date}}</div>
              </div>
              <div class="titleCompare">运维结束时间:</div>
              <div class="divCompare">
                <div id="serve_end_date1" style="display:inline">{{formList.serve_end_date}}</div>
              </div>
              <div v-for="(item, index) in formList.items" :key="index">
                <el-row :gutter="20">
                  <el-button-group>
                    <el-button type="primary">第 {{index+1}} 条</el-button>
                  </el-button-group>
                </el-row>
                <br>
                <div class="titleCompare">指标项:</div>
                <div class="divCompare">
                  <div :id="'target_indexC'+index" class="divCompare1">{{item.target_index}}</div>
                </div>
                <div class="titleCompare">指标描述:</div>
                <div class="divCompare">
                  <div :id="'target_descC'+index" class="divCompare1">{{item.target_desc}}</div>
                </div>
                <div class="titleCompare">指标要求:</div>
                <div class="divCompare">
                  <div :id="'target_requireC'+index" class="divCompare1">{{item.target_require}}</div>
                </div>
                <div class="titleCompare">服务时间:</div>
                <div class="divCompare">
                  <div :id="'service_timeC'+index" class="divCompare1">{{item.service_time}}</div>
                </div>
                <div class="titleCompare">服务方式:</div>
                <div class="divCompare">
                  <div :id="'service_methodC'+index" class="divCompare1">{{item.service_method |f_targetType}}</div>
                </div>
                <div class="titleCompare">交付成果:</div>
                <div class="divCompare">
                  <div :id="'service_resultC'+index" class="divCompare1">{{item.service_result}}</div>
                </div>
              </div>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-card shadow="always">
            <el-form :model="formList2" ref="formList2" size="normal">
              <div class="title">往年资产信息</div>
              <div class="titleCompare">数量:</div>
              <div class="divCompare">
                <div id="device_num2" style="display:inline">{{formList2.device_num}}</div>
              </div>
              <div class="titleCompare">设备（系统）名称:</div>
              <div class="divCompare">
                <div id="device_name2" style="display:inline">{{formList2.device_name}}</div>
              </div>
              <div class="titleCompare">资产运行状态:</div>
              <div class="divCompare">
                <div id="status2" style="display:inline">{{formList2.status | f_runType}}</div>
              </div>
              <div class="titleCompare">资产类型:</div>
              <div class="divCompare">
                <div id="device_type2" style="display:inline">{{formList2.device_type | f_ITtypeRename}}</div>
              </div>
              <div class="titleCompare">其它类型:</div>
              <div class="divCompare">
                <div id="other2" style="display:inline">{{formList2.other }}
                </div>
              </div>
              <div class="titleCompare">设备（系统）型号:</div>
              <div class="divCompare">
                <div id="device_model2" style="display:inline">{{formList2.device_model }}</div>
              </div>
              <div class="titleCompare">购置时间:</div>
              <div class="divCompare">
                <div id="purchase_time2" style="display:inline">{{formList2.purchase_time}}</div>
              </div>
              <div class="titleCompare">总购置价格:</div>
              <div class="divCompare">
                <div id="purchase_price2" style="display:inline">{{formList2.purchase_price}}</div>
              </div>
              <div class="titleCompare">过保时间（质保日期）:</div>
              <div class="divCompare">
                <div id="guarantee_time2" style="display:inline">{{formList2.guarantee_time}}
                </div>
              </div>
              <div class="titleCompare">制造商:</div>
              <div class="divCompare">
                <div id="manufacturer2" style="display:inline">{{formList2.manufacturer}}</div>
              </div>
              <div class="titleCompare">承建商:</div>
              <div class="divCompare">
                <div id="contactor2" style="display:inline">{{formList2.contactor}}</div>
              </div>
              <div class="titleCompare">总运维资金预算:</div>
              <div class="divCompare">
                <div id="service_pre_amount2" style="display:inline">{{formList2.service_pre_amount  }}
                </div>
              </div>
              <div class="titleCompare">采购方式:</div>
              <div class="divCompare">
                <div id="buy_type2" style="display:inline">{{formList2.buy_type | f_purchaseType}}</div>
              </div>
              <el-form-item prop="only_source_file" v-if="formList2.buy_type== 1">
                <up-load titleName="单一来源附件" :size="50" :require="true" :switch="false"
                  :color="formList.only_source_file!=formList2.only_source_file?'red':''"
                  v-model="formList2.only_source_file">
                </up-load>
              </el-form-item>
              <div>
                <div class="titleCompare">服务内容:</div>
                <div class="divCompare">
                  <div id="service_content2" style="display:inline">{{formList2.service_content}} </div>
                </div>
              </div>
              <div class="titleCompare">运维开始时间:</div>
              <div class="divCompare">
                <div id="serve_start_date2" style="display:inline">{{formList2.serve_start_date}}</div>
              </div>
              <div class="titleCompare">运维结束时间:</div>
              <div class="divCompare">
                <div id="serve_end_date2" style="display:inline">{{formList2.serve_end_date}}</div>
              </div>
              <div v-for="(item, index) in formList2.items" :key="index">
                <el-row :gutter="20">
                  <el-button-group>
                    <el-button type="primary">第 {{index+1}} 条</el-button>
                  </el-button-group>
                </el-row>
                <br>
                <div class="titleCompare">指标项:</div>
                <div class="divCompare">
                  <div :id="'target_index'+index" class="divCompare1">{{item.target_index}}</div>
                </div>
                <div class="titleCompare">指标描述:</div>
                <div class="divCompare">
                  <div :id="'target_desc'+index" class="divCompare1">{{item.target_desc}}</div>
                </div>
                <div class="titleCompare">指标要求:</div>
                <div class="divCompare">
                  <div :id="'target_require'+index" class="divCompare1">{{item.target_require}}</div>
                </div>
                <div class="titleCompare">服务时间:</div>
                <div class="divCompare">
                  <div :id="'service_time'+index" class="divCompare1">{{item.service_time}}</div>
                </div>
                <div class="titleCompare">服务方式:</div>
                <div class="divCompare">
                  <div :id="'service_method'+index" class="divCompare1">{{item.service_method |f_targetType}}</div>
                </div>
                <div class="titleCompare">交付成果:</div>
                <div class="divCompare">
                  <div :id="'service_result'+index" class="divCompare1">{{item.service_result}}</div>
                </div>
              </div>
            </el-form>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import UpLoad from '@/components/Upload'
import { MyCompare } from './compare'
import { f_runType, f_ITtypeRename, f_purchaseType, f_targetType } from '@/utils/filters.js'

export default {
  components: {
    UpLoad
  },
  props: {
    formList: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      loading: true,
      formList2: {},
    }
  },
  mounted () {

  },
  methods: {
    async init () {
      this.loading = true
      const res = await this.$http('inputItObj', {
        id: this.formList.copy_old_id
      })
      this.formList2 = res

      if (this.formList.items.length > this.formList2.items.length) {
        this.itemsNum = this.formList2.items.length
      } else {
        this.itemsNum = this.formList.items.length
      }
      this.formList.serve_start_date = this.$util.formatDate(this.formList.serve_start_date)
      this.formList2.serve_start_date = this.$util.formatDate(this.formList2.serve_start_date)
      this.formList.serve_end_date = this.$util.formatDate(this.formList.serve_end_date)
      this.formList2.serve_end_date = this.$util.formatDate(this.formList2.serve_end_date)
      this.compare()
      // this.loading = false
    },
    compare () {
      setTimeout(() => {
        MyCompare(document.getElementById('device_num' + '1'), document.getElementById('device_num' + '2'))
        MyCompare(document.getElementById('device_name' + '1'), document.getElementById('device_name' + '2'))
        MyCompare(document.getElementById('status' + '1'), document.getElementById('status' + '2'))
        MyCompare(document.getElementById('device_type' + '1'), document.getElementById('device_type' + '2'))
        MyCompare(document.getElementById('other' + '1'), document.getElementById('other' + '2'))
        MyCompare(document.getElementById('device_model' + '1'), document.getElementById('device_model' + '2'))
        MyCompare(document.getElementById('purchase_time' + '1'), document.getElementById('purchase_time' + '2'))
        MyCompare(document.getElementById('contacts' + '1'), document.getElementById('contacts' + '2'))
        MyCompare(document.getElementById('guarantee_time' + '1'), document.getElementById('guarantee_time' + '2'))
        MyCompare(document.getElementById('manufacturer' + '1'), document.getElementById('manufacturer' + '2'))
        MyCompare(document.getElementById('contactor' + '1'), document.getElementById('contactor' + '2'))
        MyCompare(document.getElementById('service_pre_amount' + '1'), document.getElementById('service_pre_amount' + '2'))
        MyCompare(document.getElementById('serve_start_date' + '1'), document.getElementById('serve_start_date' + '2'))
        MyCompare(document.getElementById('serve_end_date' + '1'), document.getElementById('serve_end_date' + '2'))
        MyCompare(document.getElementById('buy_type' + '1'), document.getElementById('buy_type' + '2'))
        MyCompare(document.getElementById('service_content' + '1'), document.getElementById('service_content' + '2'))
        let i = 0
        if (i < this.itemsNum) {
          MyCompare(document.getElementById('target_index' + i), document.getElementById('target_indexC' + i))
          MyCompare(document.getElementById('target_desc' + i), document.getElementById('target_descC' + i))
          MyCompare(document.getElementById('target_require' + i), document.getElementById('target_requireC' + i))
          MyCompare(document.getElementById('service_time' + i), document.getElementById('service_timeC' + i))
          MyCompare(document.getElementById('service_method' + i), document.getElementById('service_methodC' + i))
          MyCompare(document.getElementById('service_result' + i), document.getElementById('service_resultC' + i))
          i++
        }

        this.loading = false
      }, 3000)
    }
  },
  watch: {
    'formList.id': {
      // 深度监听
      handler (newId, oldId) {
        if (newId !== oldId) {
          this.init()
        }
      },
      immediate: true
    }
  },
  filters: {
    f_runType: f_runType,
    f_ITtypeRename: f_ITtypeRename,
    f_purchaseType: f_purchaseType,
    f_targetType: f_targetType,
  }
}
</script>

<style scoped>
.titleCompare {
  margin-top: 10px;
  font-size: 15px;
}
.divCompare {
  margin: 5px 0px 10px 0px;
  border: 0.5px solid;
  border-radius: 5px;
  padding: 6px;
  border-color: rgb(220, 222, 226);
  min-height: 2rem;
}
.divCompare1 {
  /* display: inline; */
  height: 5rem;
  overflow-y: auto;
  min-height: 2rem;
}
.loading {
  position: fixed;
  /* left: 0; */
  /* top: 0; */
  background: url("~@/assets/images/svg/loading.svg") center center no-repeat
    #fff;
  width: 65%;
  height: 500px;
  z-index: 1000;
}
</style>
